<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>getElementsByTagName</title>
  </head>
  <body>
    <div>
      M1: document.getElementByTagName
      <div>M1: oDiv.getElementsByTagName</div>
    </div>
    <script type="text/javascript">
      /**
       * getElementsByTagName返回的结果是一个HTMLCollection
       * */
      // oDiv: [div, div] 结果得到的是两个div, 因为在document元素节点下存在两个div标签
      var oDiv = document.getElementsByTagName('div'),
        // 将查找到的div集合中的第一个元素赋值给oParent
        // ps: 在JS中获取到的HTML元素一般以'o'开头, 表示为元素对象
        oParent = oDiv[0],
        // 获取到oParent元素下的div元素集合
        oChildren = oParent.getElementsByTagName('div');
      // 打印结果: M1: oDiv.getElementsByTagName
      console.log(oChildren[0].textContent);
    </script>
  </body>
</html>
